<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../themes/bootstrap/cetc54.ui.all.css">
</head>
<body>
<ul id="ulSteps">
    <li class="active">
        <span class="step">1</span>
        <span class="title">打开本地合同书</span>
    </li>

    <li>
        <span class="step">2</span>
        <span class="title">快速标记</span>
    </li>

    <li>
        <span class="step">3</span>
        <span class="title">打开本地预算书</span>
    </li>

    <li>
        <span class="step">4</span>
        <span class="title">快速标记</span>
    </li>
    <li>
        <span class="step">5</span>
        <span class="title">保存</span>
    </li>
</ul>
<div id="btnTool">
    <button id="btnPrev" ui-config="style:'button_submit'">上一步</button>
    <button id="btnNext" ui-config="style:'button_submit'">下一步</button>
</div>
</body>
<script type="text/javascript" src="../../lib/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../../release/cetc54.ui.all.js"></script>
<script>
    $(function(){
        $('#btnTool').uiButtonBar();
        $('#ulSteps').uiWizard({
            selectedItem: {step: 1},
            buttonPrev:$('#btnPrev'),
            buttonNext:$('#btnNext'),
            disablePreviousStep: false,
            onBeforeStepChange:function(currStep){
                alert('当前步骤：'+currStep);
            },
            onStepChanged:function(currStep){
                alert('已转至步骤：'+currStep);
            },
            onFinished:function(){
                alert('完成');
            }
        });
    });
</script>
</html>